<template>
    <div id="freelancerIndex" class="freelancerIndex">
        <header class="header">
            <input type="search" placeholder="Search" />
            <i class="iconfont icon-search"></i>
        </header>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide swiper-slide-center none-effect">
                    <router-link  :to="{path:''}"><img src="../assets/images/banner01.jpg" ></router-link>
                </div>
                <div class="swiper-slide">
                    <router-link  :to="{path:''}"><img src="../assets/images/banner02.jpg" ></router-link>
                </div>
                <div class="swiper-slide">
                    <router-link  :to="{path:''}"><img src="../assets/images/banner03.jpg" ></router-link>
                </div>
                <div class="swiper-slide">
                    <router-link  :to="{path:''}"><img src="../assets/images/banner02.jpg" ></router-link>
                </div>
                <div class="swiper-slide">
                    <router-link  :to="{path:''}"><img src="../assets/images/banner03.jpg" ></router-link>
                </div>
            </div>            
        </div>
        <div class="classify_menu">
            <div class="">
                <i class="iconfont icon-zhizaoye"></i>制造行业
            </div>
            <div class="">
                <i class="iconfont icon-zhizaoye"></i>软件产品
            </div>
            <div class="">
                <i class="iconfont icon-zhizaoye"></i>信息化
            </div>
            <div class="">
                <i class="iconfont icon-zhizaoye"></i>全部行业
            </div>
        </div>
        <div class="classify_nav">
            <span class="item active">
                推荐
            </span>
            <span class="item">
                最近
            </span>
            <span class="item">
                公司
            </span>
        </div>
        <div class="freelancer_list">
            <h1 class="title">
                <strong>这里是一个项目标题</strong>
                <span>顾问寻找中</span>
            </h1>
            <p class="salary">¥2600元</p>
            <div class="detailed">
                <span>XX类型顾问<em>|</em>6个月<em>|</em>上海</span>
                <span>59人浏览</span>
            </div>
            <dl class="company">
                <dt><img src="../assets/images/login_bg.jpg" /></dt>
                <dd>
                    <h2>杭州剑齿虎信息技术有限公司</h2>
                    <p>互联网／大数据</p>
                </dd>
            </dl>
        </div>
        <div class="footer_menu">
            <router-link :to="{path:''}" class="active"><i class="iconfont shouye-dianjitai"></i>首页</router-link>
            <router-link :to="{path:''}"><i class="iconfont xiaoxi-weidianjitai"></i>消息</router-link>
            <router-link :to="{path:''}"><i class="iconfont wode-weidianjitai"></i>我的</router-link>
        </div>
    </div>
</template>

<script>
import swiper from '../../static/plugins/swiper/swiper.min.js'
export default {
    name: 'freelancerIndex',
    created() {
        
    },
    mounted() {
        var swiper = new Swiper('.swiper-container', {
            slidesPerView: 1.2,
            loop : true,
            autoplayDisableOnInteraction : false,
            centeredSlides: true,
            spaceBetween: 0
        });
        
    }
}
</script>

<style lang="scss" scoped>
@import "../../static/plugins/swiper/swiper.min.css";
.freelancerIndex {
    background: #fff;
    margin-bottom: 1.866667rem;
    .header {
        background: #fff;
        position: relative;
        text-align: left;
        input {
            border: 0;
            width: 100%;
            height: 100%;
            padding: .4rem;  
            color: #414568;  
            font-size: .373333rem;
        }
        i.icon-search {
            position: absolute;
            right: .533333rem;
            top: 0;
            color: #414568;
        }
    }
}
.swiper-container {
    width: 100%;
    margin: .533333rem 0;
    .swiper-slide {
        transform: scale(0.93);
        a {
            display: block;
        }
        img {
            border-radius: 10px;
            width: 100%;
        }
    }
    .swiper-slide-active,.swiper-slide-duplicate-active {
        transform: scale(1);
    }
    .none-effect {
        transition: none;
    }
}
.classify_menu {
    display: flex;
    justify-content: space-around;
    text-align: center;
    font-size: .32rem;
    color: rgba(0,0,0,.5);
    i {
        display: block;
        margin-bottom: .133333rem;
    }
}
.classify_nav {
    display: flex;
    justify-content: space-between;
    text-align: center;
    font-size: .32rem;
    color: rgba(0,0,0,.5);
    margin: .533333rem 20px .266667rem;
    border-top: 1px solid #EDEDED;
    .item {
        height: 48px;
        line-height: 48px;
        padding: 0 .533333rem;
        font-size: .426667rem;
        color: #696969;
        &.active {
            border-bottom: 2px solid #414568
        }
    }
}
.freelancer_list {
    background: #fff;
    margin: 0 0 .266667rem;
    padding: .266667rem .533333rem;
    .title {
        color: #212121;
        line-height: .72rem;
        display: flex;
        justify-content: space-between;
        strong {
            font-size: .48rem;
            font-weight: normal;
        }
        span {
            color: #507390;
        }
    }
    .salary {
        font-size: .48rem;
        color: #D0021B;
        line-height: .64rem;
        margin: .133333rem 0;
    }
    .detailed {
        color: #757575;
        line-height: .64rem;
        display: flex;
        justify-content: space-between;
        em {
            padding: 0 10px;
        }
    }
    .company {
        border-top: 1px solid #EDEEF0;
        margin-top: .266667rem;
        padding-top: .266667rem;
        display: flex;
        dt {
            padding: 0 .4rem;
            img{
                border: 1px solid #EDEEF0;
                border-radius: 100%;
                width: 1.066667rem;
                height: 1.066667rem;
            }
        }
        dd {
            h2 {
                font-size: .48rem;
                line-height: .64rem;
                color: #212121;
                font-weight: normal;
                margin: 0 0 .13rem;
            }
            p {
                color: #757575;
                line-height: .48rem;
            }
        }
        
    }
    &:nth-last-of-type(1) {
        margin-bottom: 0;
    }
}
</style>
